/* eslint-disable react-native/no-inline-styles */
import React, {useState, useRef, useEffect} from 'react';
import {connect} from 'react-redux';
import {Dimensions} from 'react-native';
import {
  Text,
  View,
  Card,
  Colors,
  Checkbox,
  MaskedInput,
} from 'react-native-ui-lib';
import Logo from '../../components/Logo';
import * as Animatable from 'react-native-animatable';
import AntdIcons from 'react-native-vector-icons/AntDesign';
import {useInterval} from 'ahooks';

let {width, height} = Dimensions.get('window');

function Verificationcode(props) {
  let {
      route: {params},
      navigation,
      appTheme,
      dispatch,
      statusbars,
      vftime,
    } = props,
    inputRef = useRef();

  const [code, setcode] = useState('');
  const [status, setstatus] = useState(null);
  const [count, setCount] = useState(60);

  let active = {
    from: {
      borderColor: Colors.primaryColor,
    },
    to: {
      borderColor: 'transparent',
    },
  };

  function setvftime(time) {
    dispatch({
      type: 'CHANGE_VFTIME',
      vftime: time,
    });
  }

  useEffect(() => {
    inputRef?.current?.focus();
    setvftime(60);
  }, []);

  useInterval(
    () => {
      if (count > 0) {
        setCount(() => {
          return count - 1;
        });
        setvftime(count - 1);
      } else {
        setCount(0);
        setvftime(0);
      }
    },
    count == 0 ? null : 1000,
    {
      immediate: true,
    },
  );

  return (
    <View flex-1 center style={{backgroundColor: Colors.backgroundColor}}>
      <View style={{height: height / 2, paddingTop: 0}} center>
        <View
          width={width / 1.2}
          height={60}
          row
          style={{justifyContent: 'flex-start'}}>
          <Card
            style={{
              width: 60,
              height: 60,
              backgroundColor: Colors.backgroundColor,
            }}
            left
            enableShadow={false}
            onPress={() => {
              navigation.goBack();
            }}>
            <AntdIcons name="left" size={22} color={Colors.headingColor} />
          </Card>
        </View>
        <Logo status={status} />
        <Text
          heading
          marginT-8
          marginB-40
          onPress={() => {
            dispatch({
              type: 'CHANGE_THEME',
              appTheme: appTheme === 'light' ? 'dark' : 'light',
            });
            dispatch({
              type: 'CHANGE_STATUSBAR',
              statusbars:
                appTheme === 'light'
                  ? {
                      ...statusbars,
                      backgroundColor: '#333333',
                      barStyle: 'light-content',
                    }
                  : {
                      ...statusbars,
                      backgroundColor: '#FFFFFF',
                      barStyle: 'dark-content',
                    },
            });
          }}>
          欢迎使用TASKS
        </Text>
        <View height={54} padding-12 width={width / 1.2}>
          <MaskedInput
            ref={inputRef}
            renderMaskedText={value => {
              let newvalue = ['', '', '', ''],
                str = value || '';
              for (let i = 0; i < str.length; i++) {
                newvalue[i] = str.charAt(i);
              }
              return (
                <View width={'100%'} row spread>
                  {newvalue.map((it, i) => {
                    return str.length == i ? (
                      <Animatable.View
                        key={i}
                        animation={active}
                        iterationCount={'infinite'}
                        style={{
                          borderWidth: 1,
                          width: 48,
                          height: 48,
                          backgroundColor: Colors.cardbackgroundColor,
                          borderRadius: 6,
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}>
                        <Text
                          color={Colors.headingColor}
                          style={{fontSize: 20}}>
                          {it}
                        </Text>
                      </Animatable.View>
                    ) : (
                      <View
                        key={i}
                        style={{
                          width: 48,
                          height: 48,
                          backgroundColor: Colors.cardbackgroundColor,
                          borderRadius: 6,
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}>
                        <Text
                          color={Colors.headingColor}
                          style={{fontSize: 20}}>
                          {it}
                        </Text>
                      </View>
                    );
                  })}
                </View>
              );
            }}
            keyboardType="number-pad"
            maxLength={4}
            value={code}
            onChangeText={value => {
              setcode(value);
            }}
          />
        </View>
        <View
          height={60}
          row
          marginT-8
          width={width / 1.2}
          style={{overflow: 'hidden'}}
          padding-12>
          <View marginL-8 flex-1>
            <Text numberOfLines={5} subbody center>
              已发送短信验证码至{params.username}
            </Text>
          </View>
        </View>
      </View>
      <View flex-1 centerH>
        <Card
          style={{
            width: 66,
            height: 66,
            backgroundColor:
              count === 0 ? Colors.primaryColor : Colors.cardbackgroundColor,
          }}
          borderRadius={88}
          center
          disabled={count > 0}
          onPress={() => {
            if (count > 0) {
              return;
            } else {
              setvftime(60);
              setCount(60);
            }
          }}>
          {count > 0 ? (
            <Animatable.Text
              style={{color: '#999'}}
              animation="rubberBand"
              iterationCount="infinite">
              {count}
            </Animatable.Text>
          ) : (
            <Text color={'#fff'}>重新发送</Text>
          )}
        </Card>
      </View>
    </View>
  );
}

const mapStateToProps = state => {
  return {
    appTheme: state.appTheme,
    statusbars: state.statusbars,
    vftime: state.vftime,
  };
};

export default connect(mapStateToProps)(Verificationcode);
